<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";

import { Plus, Upload } from "@element-plus/icons-vue";
import { regionDataPlus } from "@/utils/chinaArea";
import tagArr from "./tagArr.vue";
import Base from "@/views/editor/components/base.vue";
import Uploads from "./upload.vue";
import Explains from "./explain.vue";
import { explainArr } from "./exolainJson";
import { useRouter } from "vue-router";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  capital: 1,
  orUnit: "XXX民政局",
  name: "杭州青青草公益服务中心 ",
  username: "孙小小",
  userPhone: "139XXXXXXXX",
  time: [],
  projectnum: "SXXXXXXXXXX",
  area: ["330000", "330100", ""],
  tags: []
});
const capitalArr = [
  { label: "政府", value: 1 },
  { label: "基金会", value: 2 },
  { label: "社会组织", value: 3 },
  { label: "慈善信托", value: 4 },
  { label: "企业", value: 5 },
  { label: "个人", value: 6 },
  { label: "其他", value: 7 }
];
const rules = reactive<FormRules>({
  capital: [{ required: true, message: "请选择资方类型", trigger: "change" }],
  orUnit: [{ required: true, message: "请输入资助方名称", trigger: "blur" }],
  name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
  username: [
    { required: true, message: "请输入联系人用户名", trigger: "blur" }
  ],
  userPhone: [
    { required: true, message: "请输联系人入手机号", trigger: "blur" }
  ],
  time: [{ required: true, message: "请选择项目周期", trigger: "change" }],
  projectnum: [{ required: true, message: "请输入项目编号", trigger: "blur" }],
  area: [{ required: true, message: "请选择所属地区", trigger: "change" }]
});
const explainArr1 = reactive(explainArr);
const deletes = index => {
  explainArr1.splice(index, 1);
};

const fileList = ref([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
  },
  {
    name: "food2.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
  }
]);
let $emit = defineEmits(["submitClick", "closeClick"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      $emit("submitClick", 2);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div class="text-[20px] font-bold mt-[20px] mb-[20px]">基本信息</div>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
    label-position="top"
    :scroll-to-error="true"
  >
    <el-form-item label="资方类型" prop="capital">
      <el-select v-model="ruleForm.capital" placeholder="请选择资方类型">
        <el-option
          v-for="item in capitalArr"
          :value="item.value"
          :label="item.label"
          >{{ item.label }}</el-option
        >
      </el-select>
      <!-- <el-se-group v-model="ruleForm.capital">
        <el-radio v-for="item in capitalArr" :value="item.value">{{
          item.label
        }}</el-radio>
      </el-se-group> -->
    </el-form-item>
    <el-form-item label="资助方名称" prop="orUnit">
      <el-input
        v-model="ruleForm.orUnit"
        placeholder="请输入资助方名称"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目名称" prop="name">
      <el-input
        v-model="ruleForm.name"
        placeholder="请输入项目名称"
        clearable
      />
    </el-form-item>
    <el-form-item label="联系人" prop="username">
      <el-input
        v-model="ruleForm.username"
        placeholder="请输入联系人"
        clearable
      />
    </el-form-item>
    <el-form-item label="联系方式" prop="userPhone">
      <el-input
        v-model="ruleForm.userPhone"
        placeholder="请输入联系方式"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目周期" prop="time">
      <el-date-picker
        v-model="ruleForm.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        clearable
      />
    </el-form-item>
    <el-form-item label="项目编号" prop="projectnum">
      <el-input
        v-model="ruleForm.projectnum"
        placeholder="请输入项目编号"
        clearable
    /></el-form-item>
    <el-form-item label="项目预算">
      <el-input
        v-model="ruleForm.budget"
        placeholder="请输入项目预算"
        clearable
    /></el-form-item>
    <el-form-item label=""></el-form-item>
    <el-form-item label="所属地区" prop="area" class="w-full">
      <el-cascader v-model="ruleForm.area" :options="regionDataPlus" />
      <el-input
        v-model="ruleForm.areatitle"
        placeholder="请输入具体街道名称"
        class="!w-[400px] ml-[30px]"
      ></el-input>
    </el-form-item>
    <el-form-item label=""></el-form-item>
    <el-form-item label="自定义标签" class="w-full">
      <tagArr />
    </el-form-item>
    <el-form-item label="项目概述" class="w-full">
      <Base class="border" style="border-color: #ccc" />
    </el-form-item>
    <el-form-item class="w-1/2">
      <template #label>
        封面
        <span class="font-light text-[12px]"
          >支持jpg或png格式，大小不超过1M，1920px*1080px。</span
        >
      </template>
      <Uploads :limit="1" />
    </el-form-item>
    <el-form-item class="w-1/2">
      <template #label>
        详情页轮播图
        <span class="font-light text-[12px]"
          >最多3张，支持jpg或png格式，大小不超过1M，1920px*1080px。</span
        >
      </template>
      <Uploads />
    </el-form-item>
    <div class="text-[20px] font-bold mt-[20px] mb-[20px] w-full">
      项目说明
      <el-button
        type="primary"
        class="float-right"
        plain
        :icon="Plus"
        size="small"
        @click="
          () => {
            explainArr1.push({
              title: '',
              contont: '',
              show: true,
              id: Date.now()
            });
          }
        "
        >新增</el-button
      >
    </div>
    <template v-for="(item, index) in explainArr1" :key="item.id">
      <Explains
        :title="item.title"
        :contont="item.contont"
        :show="item.show"
        @deletes="deletes(index)"
      />
    </template>
    <el-form-item class="w-full mt-[30px]" label="上传附件">
      <el-upload
        v-model:file-list="fileList"
        accept="pdf,"
        style="width: 400px"
        action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
        :headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
      >
        <el-button size="small"
          ><el-icon class="el-icon--right"><Upload /></el-icon
          >上传文件</el-button
        >
        <template #tip>
          <div class="el-upload__tip">支持pdf、doc或docx,不超过5M。</div>
        </template>
      </el-upload>
    </el-form-item>
  </el-form>
  <div class="h-[40px]"></div>
  <div
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="$emit('closeClick')">取消</el-button>
    <el-button @click="$emit('closeClick')">保存草稿</el-button>
    <el-button type="primary" @click="submitForm(ruleFormRef)"
      >下一步</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
.demo-ruleForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    width: 30%;
    &.w-full {
      width: 100%;
    }
    &.w-1\/2 {
      width: 50%;
    }
  }
}
</style>
